<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery-validate演示</title>
<#include  "/include/common.ftl">
    <script type="text/javascript" src="/assets/lib/jquery-validation-1.17.0/jquery.validate.min.js"></script>
    <script type="text/javascript" src="/assets/lib/jquery-validation-1.17.0/localization/messages_zh.min.js"></script>
    <style type="text/css">
        .error {
            color: red;
            border: 1px solid red
        }
    </style>
    <script type="text/javascript">
        $().ready(function () {
            var validator = $("#inputForm").validate({
                // onsubmit:false,//提交时不验证
                rules: {
                    txtName: {
                        required: true,
//                        af:["a","f"],
                        pattern: /^[0-9a-z_A-Z\u4e00-\u9fa5]+$/,
                        remote: {
                            url: "checkName.htm",
                            cache: false,
                            //要传递的数据,也可以多个。默认为：当前元素名称=值，
//                            data: {
//                                username: function() {
//                                    return $("#username").val();
//                                }
//                            }
                        }
                    },
                    password: "required",
                    confirmPassword: {
                        required: true,
                        minlength: 6,
                        maxlength: 12,
                        equalTo: "#password"
                    },
                    phone:{
                        required: true,
                        pattern: /^1[345789]\d{9}$/
                    },
                    email: {
                        required: true
                    },
                    age:{
                        required: true,
                        range:[18,40]
                    },
                    amount: {
                        required: true,
                        number: true,
                        min:0,
                        max:100
                    }
                },
                messages: {
                    txtName: {remote: "名称已经存在"},
                    password: {required: '密码不能为空'},
                    // phone:{}
                    confirmPassword: {
                        minlength: "长度最小6位",
                        maxlength: "最大长度12位",
                        equalTo: "两次输入的密码不一样"
                    },
                    age:{
                        required: "年龄必须填写",
                        range: "年龄必须介于18-40之间"
                    },
                    amount:{
                        number:"只能输入数字6"
                    }
                }
            });

            //表单恢复到验证前原来的状态
            $("#btnReset").click(function () {
                $("#inputForm").validate().resetForm();
            });

            $("#btnValid").click(function () {
                //还原表单提交时验证
                $("#inputForm").validate().settings.onsubmit=true;
            });

            // 中文字两个字节
            $.validator.addMethod("af", function (value, element, params) {
                if (value.length > 1) {
                    return false;
                }
                if (value >= params[0] && value <= params[1]) {
                    return true;
                } else {
                    return false;
                }
            }, "必须是一个字母,且a-f");
        });
    </script>
</head>
<body>
<form id="inputForm">
    <table cellpadding="15px" border="1">
        <tr>
            <th>名称</th>
            <td><input type="text" name="txtName"/></td>
        </tr>
        <tr>
            <th>密码</th>
            <td>
                <input type="password" id="password" name="password"/>
            </td>
        </tr>
        <tr>
            <th>确认密码</th>
            <td>
                <input id="confirmPassword" name="confirmPassword" type="password">
            </td>
        </tr>
        <tr>
            <th>手机</th>
            <td>
                <input id="phone" type="text" name="phone">
            </td>
        </tr>
        <tr>
            <th>邮箱</th>
            <td>
                <input id="cemail" type="email" name="email">
            </td>
        </tr>
        <tr>
            <th>年龄</th>
            <td>
                <input id="age" type="text" name="age">
            </td>
        </tr>
        <tr>
            <th>金额</th>
            <td>
                <input type="text" id="amount" name="amount"/>
            </td>
        </tr>
        <tr>
            <td><input type="button" id="btnReset" value="重置校验"/></td>
            <td><input type="button" id="btnValid" value="还原校验"/></td>
            <td><input type="submit" value="提交"/></td>
        </tr>
    </table>
</form>

</body>
</html>